<template>
  <div >
      <el-scrollbar style="height: 200px " wrap-style="overflow-x:hidden;">
      <div>
        <p class="svgIcon">普通图标</p>
      <svg-icon  v-for="item of svgIcons" :key="item"  :icon-class="item"  class="svgIcon"  @click="selectedIcon(item)" />  
    </div>
    <div>
      <p class="elIcon">ElementUI图标</p>
      <i v-for="item of elementIcons" :key="item" :class="'el-icon-' + item" class="elIcon" @click="selectedIcon('el-icon-' + item)"/>
    </div>
      </el-scrollbar>
  
     
  </div>
</template>

<script>
import svgIcons from './svg-icons'
import elementIcons from './element-icons'
export default {
  name: 'IconSelect',
  data() {
    return {
      svgIcons,
      elementIcons,
      iconName:''
    }
  },
  mounted() {
  },
  methods: {
    filterIcons(){},
    generateIconCode(){},
    selectedIcon(iconName) {
      this.$emit('selected', iconName)
    }
  },
}
</script>

<style>
.svgIcon{
  margin: 10px;
}
.elIcon{
  margin: 10px;
}
.h500 {
  height: 300px;
}
</style>